<%inherit file="index.html"/>
<%block name="content">
<div id="content">
	<ul id="players">
		% for id, player in game.players.items():
		<li><span>${ game.playerSigns[id] } - ${ player.nickname }</span></li>
		% endfor
	</ul>
	<div id="TicTacToeHolder">
		<%include file="ticTacToe.html"/>
		<input type="hidden" id="token" value="${token}"/>
	</div>
</div>
</%block>

<%block name="javascript">
	<script type="text/javascript">
		$(document).ready(function(){
			var common = new $.g.common();
			var formWatcher = new $.g.formWatcher();

			// receive channel messages
			new $.g.channel({
				onmessage: function(m) {
					var message = JSON.parse(m.data);
					switch(message.action){
						case 'moved':
							var cell = $('#cell-' + message.moveSpace)
							var moveFrom = 'moveFrom' + message.moveFrom;
							cell.html($('<span/>').addClass(moveFrom).text(message.moveSign));
							cell.find('span').animate({ 'left': 0 }, 400);
							break;
						case 'joined':
							$('#players').append(
								$('<li/>').addClass('justAdded').append(
									$('<span/>').text(message.playerSign + ' - ' + message.playerNickname)
								)
							);
							$('#players li.justAdded span').animate({ 'left': 0 }, 400,
								function() { $('#players li.justAdded').removeClass('justAdded'); });
							break;
					}
				}
			});

		});
	</script>
</%block>
